<template>
    <div>

        <el-form :model="formFileds">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item>
                        <el-input v-model="formFileds.text"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="search()">查询
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="add()">添加
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary">导入
                        </el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <!--表格内容-->
        <el-table ref="dataDictionary" :data="tableData" style="width: 100%; margin-bottom: 5px;" border stripe
            highlight-current-row @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
            :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
            <el-table-column fixed type="selection" align="center">
            </el-table-column>
            <el-table-column property="name" label="名称">
            </el-table-column>
            <el-table-column property="value" label="值">
            </el-table-column>
            <el-table-column property="sort" label="排序权重">
            </el-table-column>
            <el-table-column property="parentid" label="上级ID">
            </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                        @click="rowEdit(scope.$index, scope.row)"></el-button>
                    <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                        @click="rowDel(scope.row.id);"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40,100]" :page-size=this.pageSize :total=this.total :current-page="currentPage" 
        layout="total, sizes, prev, pager, next, jumper" @current-change="getCurrentPage" @size-change="getSize">
        </el-pagination>

        <!-- -弹出层 -->
        <DataDictionaryAdd ref="dictionaryAddRef" v-if="dataDictionaryAdd" :dataDictionaryAdd="dataDictionaryAdd"
            @dialogClose="dialogClose"></DataDictionaryAdd>
        <DataDictionaryEdit ref="dictionaryEditRef" v-if="dataDictionaryEdit" :dataDictionaryEdit="dataDictionaryEdit"
            @dialogClose="dialogClose" :tableData="editProps"></DataDictionaryEdit>
    </div>
</template>
      
<script>
import DataDictionaryEdit from './dataDictionaryEdit.vue';
import DataDictionaryAdd from './dataDictionaryAdd.vue';
import { getAll,delData,getData } from '@/api/systemAdministrator/dataDictionary';

export default {
    name: "dataDictionary",
    components: {
        DataDictionaryEdit,
        DataDictionaryAdd
    },
    data () {
        return {
            formFileds: {
                text: ''
            },
            tableData: [
                {
                    id: 1,
                    name: '1',
                    value: '1',
                    sort: 1,
                    parentid: 1,
                    remark: ''
                },
            ],
            pageSize: 10,
            total: 0,
            currentPage: 1,
            dataDictionaryEdit: false,
            dataDictionaryAdd: false,
            editProps: ''
        }
    },
    methods: {

        handleRowClick (row, event, column) {

            // 仅选中当前行
            // this.setCurRowChecked(row);
        },
        handleCheckedAllAndCheckedNone (selection) {

            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.dataDictionary.setCurrentRow();
        },

        dialogClose () {
            this.dataDictionaryEdit = false;
            this.dataDictionaryAdd = false;
            this.getList();
        },

        rowEdit (index, row) {
            // //当前选中行
            this.dataDictionaryEdit = true;
            this.editProps = row;
        },
        add(){
            this.dataDictionaryAdd = true;
        },
        rowDel (id) {
            console.log(id);
            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                delData(id).then((res) => {
                    if(res){
                        console.log(res.data);
                        console.log(res.msg);
                        this.tableData.splice(id, 1);
                        this.$message.success('删除成功');
                        this.getList();
                    }
                })
            });
        },
        getCurrentPage(currentPage){
            // console.log(currentPage);
            this.currentPage = currentPage;
            this.getList();
        },
        getSize(pageSize){
            // console.log(pageSize);
            this.pageSize = pageSize;
            this.getList();
        },
        getList(){
            this.param = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize;
            getAll(this.param).then((res) => {
                if(res){
                    console.log(res.data);
                    console.log(res.msg);
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                }
            })
        },
        search(){
            if(!this.formFileds.text){
                this.getList();
                return ;
            }
            let data = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize + '&input=' + this.formFileds.text;
            console.log(data);
            getData(data).then((res) => {
                
                if(res){
                    console.log(res.data);
                    console.log(res.msg);
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                }
            })
        }

    },
    mounted(){
        this.getList();
        // console.log(this.tableData);
        // console.log(new Date().toLocaleString());
    }
}
</script>
      
<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
      